<template>
  <!-- 设备信息 -->
  <div class="FlDevice">
    <!-- 搜索框-->
    <div style="padding: 0px 0px;">
      <searchComponentsCss
              :searchData="searchData"
              :optionsZi="optionsZi"
              :searchOptionTable="searchOptionTable"
              :shrinkBoxOpenClose='shrinkBoxOpenClose'
              @searchCallBack="searchCallBack"
      ></searchComponentsCss>
       <!-- 收缩框 -->
       <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
           <i :class="shrinkBoxOpenClose?'el-icon-arrow-up':'el-icon-arrow-down'" v-if="numSearch>8"></i>
       </div>
       <!-- @clearSearch='clearSearch' -->
        <div style="border-top:1px solid #E6E6E6;margin:0px 20px;"></div>
        <div class="right_row" style="padding: 25px 30px;">
        <!--新增按钮-->
        <buttonhurdle
                v-if="but_add"
                class="buttonhurdle"
                :diaDataAdd="searchData"
                :optionsZi="optionsZi"
                :searchOptionTable="searchOptionTable"
                :multipleSelection='multipleSelection'
                @toAdd="toAdd"
        ></buttonhurdle>
        <!--批量删除按钮-->
        <batches
              v-if="but_delBatches"
              class="buttonhurdle"
              @toDelete="toDelete"
        >
        </batches>
        <!-- 导出 Derived form-->
        <derivedTbale
              v-if="but_derivedTbale"
              class="importX"
              :suoS='suoS'
              :disabled='disabled'
              :multipleSelection='multipleSelection'
        />
        <!-- 导入 The import form-->
        <importTbale
              v-if="but_importTbale"
              style="margin-left:15px;"
              :importUrl='importUrl'
              @handleSuccessImport='handleSuccessImport'
        />
        <!-- 下载模板 Download the template-->
        <downloadTemplate
              v-if="but_downloadTemplate"
              style="margin-left:15px;"
        />
        <!-- 模板导入导出下载 -->
        <!-- <importXlsx
              class="importX"
              :importUrl='importUrl'
              :suoS='suoS'
              :disabled='disabled'
              :multipleSelection='multipleSelection'
              @handleSuccessImport='handleSuccessImport'
        /> -->
        <rightButtons
                class="right_buttons"
                @sunS_F='sunS_F'
                @emptySearch='emptySearch'
                @configuration='configuration'
                @goFatherComponent="goFatherComponent"
                :configurationData="searchData"
                :btn-switch-configuration="false"
        ></rightButtons>
      </div>
    </div>
    <!-- 表格 -->
    <div class="out">
      <!--数据列表-->
      <!-- 字典 -->
    <dictionariesPlus :searchData='searchData' :modelType='modelType' @optionData="dictionariesCallBack"></dictionariesPlus>
      <el-table
              ref="multipleTable"
              :data="dataAttribute"
              v-loading.body="false"
              border
              fit
              highlight-current-row
              size="mini"
              :cell-style="{padding:'5px 0'}"
              @selection-change="handleSelectionChange"
              @sort-change="sortChangeTable"
              max-height="511px"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
          width="54px"
        >
        </el-table-column>
        <el-table-column
                align="center"
                v-for="item in searchData"
                v-if="item.tableSign"
                :key="item.id"
                :label="item.CN"
                :prop="item.EN"
                :sortable="customMethod(item)"
                :show-overflow-tooltip="true"
                min-width="140px"
        >
        <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180px" fixed="right" v-if="but_look || but_edit ||but_del">
          <template slot-scope="scope" class="do">
            <!-- 查看按钮 -->
            <el-button
                    v-if="but_look"
                    style="color:#0B9AC3;border:none;"
                    icon="el-icon-view"
                    circle
                    @click="makeExaId(scope.row.id)"
            ></el-button>
            <!-- 修改组件 -->
            <modificationi
                    v-if="but_edit"
                    class="inline_block"
                    :attributeOrder="searchData"
                    :optionsZi="optionsZi"
                    :searchOptionTable="searchOptionTable"
                    :modData="scope.row"
                    @modifyData="modifyData"
            ></modificationi>
            <!-- 删除按钮 -->
            <el-button
                    v-if="but_del"
                    style="color:#C90010;border:none;"
                    icon="el-icon-delete"
                    circle
                    @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagetotal"
      ></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine
            :DialogVisibleMod="DialogVisibleExamine"
            :modData="examineData"
            :optionsZi="optionsZi"
            :searchOptionTable="searchOptionTable"
            :attributeOrder="searchData"
            @examineDialog="examineDialog"
    ></examine>
  </div>
</template>
<script>
  //引入组件
  import {
    SearchCForL,
    searchComponents,
    searchComponentsCss,
    examine,
    rightButtons,
    dictionaries,
    dictionariesPlus
    // importXlsx
  } from "@/views/components/FLPage";
  //引入组件
  import {
    buttonhurdle,
    importXlsx,
    batches,
    derivedTbale,
    importTbale,
    modificationi,
    downloadTemplate
  } from "@/views/components/revenueFLpage";
  import {SAVE_CHECK_BOXS, GAIN_CHECK_BOXS} from "@/views/components/FLPage/fun/checkBoxFun";
  import {
    addFlDevice, //增加
    deleteFlDevice, //删除
    searchFlDevice, //分页查询
    modifyFlDevice, //修改
    getFlDevice, //根据ID获取
    exprotXls,//导出xlsx数据
    downTem //导出下载模板
  } from "@/api/schedule/base/flDevice/index";
  export default {
    components: {
      buttonhurdle,
      modificationi,
      examine,
      searchComponents,
      searchComponentsCss,
      importXlsx,
      rightButtons,
      dictionaries,
      dictionariesPlus,
      batches,
      derivedTbale,
      importTbale,
      downloadTemplate
    },
    name:'FlDevice',
    data() {
      return {
          but_add:true,
          but_delBatches:true,
          but_look:true,
          but_edit:true,
          but_del:true,
          but_derivedTbale:true,
          but_importTbale:true,
          but_downloadTemplate:true,
          // lookOver:true,
          // editField:true,
          // Deletebu:true,
          disabled:false,
          numSearch:0,
          //   收缩框开关
          shrinkBoxOpenClose:false,
          importUrl:'api/schedule/flDevice/importXls',
        //搜索框
        suoS: {},
        //   搜索组件的数据 columnSize
        searchData: [
          {
            EN: "id",
            CN: "",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "deviceNo",
            CN: "设备编号",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "deviceName",
            CN: "设备名称",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "deviceImei",
            CN: "设备imei号",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "monitorPointId",
            CN: "监控点",
            value: "",
            type: "select",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            dictTable:{
              'fl_monitor_point',
              id:'id',
              name:'name'
                          },
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "workmanshipId",
            CN: "水厂工艺",
            value: "",
            type: "select",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            dictTable:{
              'fl_workmanship',
              id:'id',
              name:'name'
                          },
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "transmission",
            CN: "设备传输方式如nbiot，4g",
            value: "",
            type: "select",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            typeGroupCode:'device_agreement',
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "type",
            CN: "设备类型如路由，rtu,压力表等",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "manufacturer",
            CN: "设备生产厂家",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "installDate",
            CN: "设备安装时间",
            value: "",
            type: "date",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "supplier",
            CN: "设备供应商",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
          {
            EN: "supplierPhone",
            CN: "供应商电话号码不区分座机和手机",
            value: "",
            type: "input",
            [],
            err: "长度为2-20位的所有字符!",
            Exp: "^.{2,20}$",
            true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true,
            configurationSign: true
          },
        ],
      //添加弹窗的数据模型
        {
          "",
          pqName: "",
          pqNum: "",
          BH: ""
        },
        //删除----Start--------------------------------------
        [],
        //删除----End----------------------------------------

        //查看----Start--------------------------------------

        //查看的弹窗控制器
        DialogVisibleExamine: false,

        //查看的数据
        examineData: {},

        //查看----End----------------------------------------

        //表格数据
        //后端传来的数据
        [],
          //表格选中1
          multipleSelection: [],

          //分页
          currentPage: 1, //当前页
          pagesize: 10, //每页条数
          pagetotal: 0, //总条数,
          modelType:'table',
          optionsZi:[],
          searchOptionTable:[]
      }
    },
    computed: {
      optionDatas(){
        return function (arr,val) {
          if (arr) {
            for (let i = 0; i < arr.length; i++) {
              if(arr[i].value == val){
                return arr[i].label;
              }
            }
          }
        }
      },
      customMethod() {
        return function (item) {
          return 'custom';
        }
      }
    },
    async created() {
      // 按钮权限配置
      // this.but_add = this.$store.state.user.elements['flDevice:but_add'];
      // this.but_delBatches = this.$store.state.user.elements['flDevice:but_delBatches'];
      // this.but_look = this.$store.state.user.elements['flDevice:but_look'];
      // this.but_edit = this.$store.state.user.elements['flDevice:but_edit'];
      // this.but_del = this.$store.state.user.elements['flDevice:but_del'];
      // this.but_derivedTbale = this.$store.state.user.elements['flDevice:but_derivedTbale'];
      // this.but_importTbale = this.$store.state.user.elements['flDevice:but_importTbale'];
      // this.but_downloadTemplate = this.$store.state.user.elements['flDevice:but_downloadTemplate'];
      // ------------------
      // this.but_search = this.$store.state.user.elements['flDevice:but_search'];
      // this.but_reset = this.$store.state.user.elements['flDevice:but_reset'];
      // this.but_pz = this.$store.state.user.elements['flDevice:but_peizhi'];

      //获取保存的’配置‘
      //1.ajax
      this.getSSearchNum()
      let userId = this.$store.state.user.id;
      let routerName = this.$route.path;
      let peizhiData = await GAIN_CHECK_BOXS(userId, routerName);
      //2.判断数据库里面是否有 以前存过的配置信息
      if (peizhiData!='') {
        //3.解析(序列化)
        this.searchData = JSON.parse(peizhiData);
      }
    },
    methods: {
        // 搜索框
        getSSearchNum(){
            let searchData = this.searchData
            let num = 0
            for (let i = 0; i < searchData.length; i++) {
                const element = searchData[i];
                if (element.searchSign) {
                    num +=1
                }
                else{
                    num = num
                }
            }
            this.numSearch = num
        },
      // 排序
      sortChangeTable(obj){
        // 上升
        let prop = obj.prop
        // 排序  需求  将驼峰形式的字段 改为 下划线形式的字段
        let abc = prop.replace(/([A-Z])/g, "_$1").toLowerCase()
        if (obj.order === 'ascending') {
          let suoS = this.suoS
          suoS.sortName = abc
          suoS.sortType = obj.order
          this.forData(this.currentPage, this.pagesize, suoS); //刷新列表

        }else if(obj.order === 'descending'){
          let suoS = this.suoS
          suoS.sortName = abc
          suoS.sortType = obj.order
          this.forData(this.currentPage, this.pagesize, suoS); //刷新列表
          // 下降
        }else{
          // 正常
          let suoS = this.suoS
          suoS.sortName = abc
          suoS.sortType = ''
          this.forData(this.currentPage, this.pagesize, suoS); //刷新列表
        }
      },
      handleSuccessImport(newValue){
        if (newValue == '导入成功') {
          this.forData(this.currentPage, this.pagesize, this.suoS);
        }
      },
      //配置的子组件通知
      async goFatherComponent(OverData) {
        //1.修改父组件的视图***************
        this.searchData = JSON.parse(JSON.stringify(OverData));
        //2.保存’配置‘的更改
        let obj = {};
        //三个参数都是string类型***********
        obj["userId"] = this.$store.state.user.id; //1
        obj["routerName"] = this.$route.path; ///jiChuZiLiao/flBook
        obj["stringData"] = JSON.stringify(OverData); //相当于this.searchData转成了字符串格式    [{"EN":"id","CN":"主键","value":""...
        //封装好的发请求方法*****************
        let save_check_boxs = await SAVE_CHECK_BOXS(obj);
      },
      // 配置
      configuration(msg){
        if (msg == '配置') {
          console.log(msg);
        }
      },
      // 重置
      emptySearch(msg){
          if (msg == '重置') {
            this.suoS = {};
            let suoS = this.suoS
            suoS.communityCode = this.areaCode
            this.forData(this.currentPage, this.pagesize,suoS);
          }
      },
        // 字典组件回调
        dictionariesCallBack([a={}, b={}]) {
            // 正常字典
            this.optionsZi = a;
            // 跨表字典
            this.searchOptionTable = b;
            this.forData(this.currentPage, this.pagesize, this.suoS);
        },
      //搜索
      sunS_F(msg) {
        if (msg == '搜索') {
          this.currentPage = 1;
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        }
      },
      //查询组件回调
      searchCallBack(newData) {
        let obj={};
        for(let i=0;i<newData.length;i++){
          obj[newData[i].EN]=newData[i].value;
        }
        this.suoS=obj;
      },
      //渲染数据初始
      forData(page, size, searchData) {
        searchFlDevice(page, size, searchData).then(response => {
          this.pagetotal = response.data.total;
          this.dataAttribute = response.data.list;
          if (this.dataAttribute.length ==0) {
            this.disabled = true
          }else{
            this.disabled = false
          }
        }).catch(
          this.disabled = true
        );
      },
      //添加用户--新增表单组件传来的参数
      toAdd(addData) {
        let obj = {};
        for (let i = 0; i < addData.length; i++) {
          obj[addData[i].EN] = addData[i].value;
        }
        addFlDevice(obj).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          if (response.flag) {
            this.$message({
              message: response.message,
              type: "success"
            });
          }
          else{
            this.$message({
              message: response.message,
              type: "warning"
            });

          }
        }).catch(()=>{
          this.$message.error("添加失败");
        })
      },
      //按钮栏传递了删除命令
      toDelete(orderstring) {
        this.$confirm("确认删除？").then(_ => {
          let idArr = [];
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id);
          }
          if (idArr.length == 0) {
            this.$message({
              message:'请选择要删除的数据',
              type:'warning'
            })
            return;
          }
          deleteFlDevice(idArr).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message:'删除成功',
              type:'success'
            })
          }).catch(error => {
            this.$message({
              message:'删除失败',
              type:'warning'
            })
          });
        }).catch(_ => {});
      },
      //单项删除
      deleteList(id) {
        let arrId = [id];
        this.$confirm("确认删除？").then(_ => {
          deleteFlDevice(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message:'删除成功',
              type:'success'
            })
          });
          done();
        }).catch(_ => {});
      },
      //查看
      makeExaId(id) {
        getFlDevice(id).then(response => {
          let copyDialog = true;
          this.DialogVisibleExamine = copyDialog;
          // console.log(response);
          this.examineData = response.data;
        }).catch(error => {
          alert("获取失败");
        });
      },
      //查看关闭弹窗
      examineDialog(dialogVisibleMod) {
        this.DialogVisibleExamine = false;
      },

      //修改
      modifyData(value, modData) {
        if (value) {
          let id = modData.id;
          modifyFlDevice(id, modData).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            if (response.flag) {
              this.$message({
                message: response.message,
                type: "success"
              });
            }
            else{
              this.$message({
                message: response.message,
                type: "warning"
              });

            }
          }).catch(error => {
            this.$message({
              message:'修改失败',
              type:'warning'
            })
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
        } else {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        }
      },
      //表格选中事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
        //传递删除的参数
        this.deleteDataList = val;
      },

      //分页
      handleSizeChange(val) {
        console.log("每页 " + val + " 条");
        this.pagesize = val;
        this.forData(this.currentPage, val, this.suoS);
      },
      handleCurrentChange(val) {
        console.log("当前页: " + val);
        this.currentPage = val;
        this.forData(val, this.pagesize, this.suoS);
      },
      // 序号
      indexMethod(index){
        var currentPage = this.currentPage;
        var pagesize = this.pagesize;
        this.$nextTick(function(){
          currentPage = this.currentPage;
          pagesize = this.pagesize;
        });
        return currentPage*pagesize -pagesize +1+index
      },
      // 下载模板请求
      exprotXlsx: exprotXls,
      downloadFile: downTem
      //工具栏组件传来的参数
      // FTableFunction(attributeOrderCloneTwiceL) {
      //   this.attributeOrder = attributeOrderCloneTwiceL;
      // },
    }
  };
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
  .FlDevice{
  .shrinkBox{
      text-align: center;
      font-weight: 700;
      font-size: 20px;
      height: 25px;
      // border-bottom:1px solid #E6E6E6;
  }
  /deep/.el-table--mini{
      .gutter{
          display: table-cell!important;
      }
      .el-checkbox__inner{
          width: 12px;
          height: 12px;
      }
      /deep/.el-table__body-wrapper{
          .el-table__body{
              tbody{
                  .el-table__row{
                      height: 45px !important;
                  }
              }
          }
      }
      // 改变表头的高度  改为45px
      .el-table__header-wrapper{
          .el-table__header{
              .has-gutter{
                  tr{
                      th{
                          padding: 5px 0 !important;
                          height: 34px;
                          line-height: 34px;
                      }
                  }
              }
          }
      }
      // 表头操作固定定位
      .el-table__fixed-right{
          .el-table__header{
              thead{
                  tr{
                      th{
                          padding: 5px 0 !important;
                          height: 34px;
                          line-height: 34px;
                      }
                  }
              }
          }

      }
  }
  .right_row{
      display: flex !important;
      justify-content: start;
      align-items: center;
      .buttonhurdle{
          padding: 0px;
          padding-right: 15px;
      }
      .right_buttons{
          position: absolute;
          right: 30px;
          padding: 0px;
      }
  }
  .do{
      display: flex;
  }
  .pagination{
      text-align: left;
      margin-top: 15px;
  }
}
</style>
